<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>收银台</title>
    <link rel="stylesheet" type="text/css" href="./newstyle/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="./newstyle/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="./newstyle/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="./newstyle/css/style.css"/>
    <script src="./newstyle/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(window).load(function(){
    		$(".loading").addClass("loader-chanage")
    		$(".loading").fadeOut(300) 
    	})
    </script>
    <script type="text/javascript">
		//页面加载时，判断联网状态，设置静态页面
		window.onload=function(){
			//alert("页面加载前");
			isConn();
			changePayAmount();
		}
		//页面跳转
		function toActivity(){
		    payValue=myValue1();//拿到选中的单选框value
			//判断页面选中的支付方式 0微信 1支付宝 2刷卡 3现金 4延迟
			if(payValue==0 || payValue==1 ||payValue==3){
				//微信，支付宝，现金跳转页面
				var activityName="PaymentActivity";
				cashier.toActivity(activityName,payValue);
			}else if(payValue==2){
				//刷卡操作
				alert("功能还未做");

			}else if(payValue==4){
				//延迟支付跳转页面--->商品列表页
				var activityName="ProductListActivity";
				cashier.toActivity(activityName,payValue);
			}else{
				alert("传值错误！");
			}
		}
		//拿到选中的单选框的值
		val_payPlatform=0;
		function myValue1(){
			val_payPlatform = $('#myForm input[name="radio1"]:checked ').val();
			return val_payPlatform;
		}
		//查看后台网络监控，如果是联网状态默认选中状态为0微信支付。如果没联网，默认选中状态为延迟支付，其他单选框设置不可选
		function isConn(){
			//请求android后台判断联网状态： 0联网  1没有联网
			var isconn=cashier.networkIsConn();
			//alert("返回的联网状态："+isconn);
			if(isconn==0){//没有联网时默认选中单选框为4 延迟支付，并且设置其他单选框不可选
				//alert("网络可用");
				$("input[type=radio][name=radio1][value=0]").attr("checked",true);
			}else if(isconn==1){//联网状态下默认选中0微信支付
				//alert("网络不可用，请检查您的网络！");
				$("input[type=radio][name=radio1][value=0]").attr("disabled","disabled");
				$("input[type=radio][name=radio1][value=1]").attr("disabled","disabled");
				$("input[type=radio][name=radio1][value=2]").attr("disabled","disabled");
				$("input[type=radio][name=radio1][value=3]").attr("checked",true);
			}
		}
		//更改实付金额显示
		function changePayAmount(){
			var str=cashier.getPayAmount();
			str="￥"+str+"元";
			document.getElementById("pay_amount").innerHTML=str;
		}
	</script>

	
    <style type="text/css">
	.mydiv1{
			padding-top: 70px;
			padding-bottom: 20px;
  			text-align: center; 
  			background: #fff;
  		}
  		
  		.mui-input-row label{
  			width: 100%;
  		}
  		.mui-input-group{
  			background-color: #EEEEEE;
  		} 
  		.bottomNavigation {
			    width:100%;
			    height:50px;
			    margin:0px;
			    background:#CCCCCC;
			    position:fixed;
			    bottom:0;
			    text-align:center;
			}
			.button{
				width: 100%;
				height: 100%; 
				font-size: 1.6em;
				color: #fff;
			    background-color: #FC605A;
			}
  		.information-tit {
		    padding: 1em 1em 1em 1em;
		    color: #999;
		    font-size: 1.6em;
		}
		.mode-con{ background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee}
		.mode-con dd{position:relative;  margin:0 1em; padding:1.5em 0; border-bottom:1px solid #eee;display:-moz-box;display:-webkit-box;display:box; margin-bottom:-1px}
		.mode-con dd a{ display:block; width:100%}
		.mode-con dd .fenlei{display:-moz-box;display:-webkit-box;display:box; width:100%;font-size:1.6em;}
		.mode-con dd .fenlei .xzge{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1; margin-right:1em; text-align:right}
		.mode-con .tup{ width:3em; height:3em; margin-right:.5em;vertical-align: middle;}
		.mode-right{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1; text-align:right; line-height:1.5}
		.mode-right .radio-btn{ margin-top:.6em}
    </style>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
<body>
	<header class="top-header fixed-header">
			<a class="icona" href="javascript:history.go(-1)">
					<!-- <img src="./newstyle/images/left.png"/> -->
			</a>
			<h3>收银台</h3>
			<a class="iconb" href="#">
			</a>
	</header>

	<div class="mydiv1">
		<p style="font-size: 1.6em;color:black;">订单金额</p><br />
		<p id="pay_amount" style="font-size: 3em;color:red;">￥16元</p>
	</div>  
	<div class="mui-content">
	<p class="information-tit">缴费方式</p>
	<div class="mui-card">
				<form class="mui-input-group" id="myForm">

					<dl class="mode-con">
					  <dd>
					    <div class="fenlei">
					      <div class="mode-left"> <img class="tup" src="./newstyle/images/wechat.jpg" alt=""> <span class="stored-nr"> 微信支付 </span> </div>
					      <div class="mode-right">
					        <div class="radio-btn">  
								<input name="radio1" type="radio" style="float: right" value="0" checked>
					        </div>
					      </div>
					    </div>
					  </dd>
					  <dd>
					    <div class="fenlei">
					      <div class="mode-left"> <img class="tup" src="./newstyle/images/alipay.jpg" alt=""> <span class="stored-nr"> 支付宝 </span> </div>
					      <div class="mode-right">
					        <div class="radio-btn"> 
					          <input name="radio1" type="radio" style="float: right;0px"  value="1" >
					        </div>
					      </div>
					    </div>
					  </dd>

					  <dd>
					    <div class="fenlei">
					      <div class="mode-left"> <img class="tup" src="./newstyle/images/cash.jpg" alt=""> <span class="stored-nr"> 刷卡支付 </span> </div>
					      <div class="mode-right">
					        <div class="radio-btn"> 
					          <input name="radio1" type="radio" style="float: right;0px"  value="2" >
					        </div>
					      </div>
					    </div>
					  </dd> 
					  <dd>
					    <div class="fenlei">
					      <div class="mode-left"><img class="tup" src="./newstyle/images/build.jpg" alt=""><span class="stored-nr"> 现金支付 </span> </div>
					      <div class="mode-right">
					        <div class="radio-btn"> 
					          <input name="radio1" type="radio" style="float: right;0px"  value="3" >
					        </div>
					      </div>
					    </div>
					  </dd>
					    <dd>
					    <div class="fenlei">
					      <div class="mode-left"><img class="tup" src="./newstyle/images/yanshi.png" alt=""><span class="stored-nr"> 延迟支付 </span> </div>
					      <div class="mode-right">
					        <div class="radio-btn"> 
					          <input name="radio1" type="radio" style="float: right;0px"  value="4" >
					        </div>
					      </div>
					    </div>
					  </dd>
					</dl> 
				</form>
	</div>
	</div>
	<div class="bottomNavigation">
		<input type="button"class="button" name="" id="" value="支付" onclick="toActivity()" />
	</div>
</body>
</html>